<template>
  <div>
    <mt-search
      cancel-text="取消"
      placeholder="搜索" style="height: 50%">
    </mt-search>
    <div>
      <mt-field label="签到姓名"  >{{this.number}}</mt-field>
      <mt-field label="签到座位号"  type="email">{{this.dev_num}}</mt-field>
      <mt-field label="签到教室"  type="tel" >{{this.classroom}}</mt-field>
      <mt-field label="签到周数"  type="tel" >{{this.week}}</mt-field>
      <div style="margin-top: 10rem">
        <mt-button type="default" class="set-button1" @click="getOneSigin">首次</mt-button>
        <mt-button type="default" class="set-button1" @click="getBeforeSigin">上一次</mt-button>
        <mt-button type="default" class="set-button2" @click="getAfterSigin">下一次</mt-button>
        <mt-button type="default" class="set-button2" @click="getResultSigin">尾次</mt-button>
      </div>
    </div>
  </div>

</template>

<script>
  import { Search } from 'mint-ui';
  import axios from 'axios'
  import { Field } from 'mint-ui';

    export default {
      name: "tottle-search",
      data:function () {
        return{
          value:'',
          number:'',
          dev_num:'00',
          classroom:'',
          week:'',
          siginList:[],
          siginList2:[
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第一周',useDevNum:'01'},
            {useName: this.$store.state.userName, useClassRoom:'306', useWeek:'第二周',useDevNum:'03'},
            {useName: this.$store.state.userName, useClassRoom:'308', useWeek:'第三周',useDevNum:'20'},
            {useName: this.$store.state.userName, useClassRoom:'207', useWeek:'第四周',useDevNum:'18'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第五周',useDevNum:'20'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第六周',useDevNum:'03'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第七周',useDevNum:'07'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第八周',useDevNum:'15'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第九周',useDevNum:'18'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第十周',useDevNum:'19'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第十一周',useDevNum:'16'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第十二周',useDevNum:'11'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第十三周',useDevNum:'13'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第十四周',useDevNum:'19'},
            {useName: this.$store.state.userName, useClassRoom:'307', useWeek:'第十五周',useDevNum:'22'}
          ],
          indexNumber:0,//总的签到对象数
          index:0,
          time:''
        }
      },
      components:{
          MtSearch:Search
      },
      methods:{
        getSignTotle:function () {

          var _this = this;//签到统计
          axios.post('/api/request_sign_in')
          .then(function (res) {
            _this.$store.state.classList = res.data[0];
            _this.siginList = res.data;
            _this.indexNumber = res.data.length;
            console.log("0:",_this.siginList[0])
            console.log("1:",_this.siginList[1])
          })
          .catch(function (erro) {
            console.log(erro)
            console.log("请求出错")
          });
        },
        getOneSigin:function () {
          if(this.$store.state.userName != '登录'){
            this.value = 0;
            var index = this.value;
            this.number = this.siginList2[index].useName;
            this.week = this.siginList2[index].useWeek;
            this.classroom = this.siginList2[index].useClassRoom;
            this.dev_num = this.siginList2[index].useDevNum;
          }
        },
        getResultSigin:function () {
          if(this.$store.state.userName != '登录'){
            this.value = this.siginList2.length-1;
            var index = this.value;
            this.number = this.siginList2[index].useName;
            this.week = this.siginList2[index].useWeek;
            this.classroom = this.siginList2[index].useClassRoom;
            this.dev_num = this.siginList2[index].useDevNum;
          }
        },
        getBeforeSigin:function () {
          if(this.$store.state.userName != '登录'){
            if(this.value >= 1){
              this.value = this.value - 1;
            }
            var index = this.value;
            this.number = this.siginList2[index].useName;
            this.week = this.siginList2[index].useWeek;
            this.classroom = this.siginList2[index].useClassRoom;
            this.dev_num = this.siginList2[index].useDevNum;
          }
        },
        getAfterSigin:function () {
          if(this.$store.state.userName != '登录'){
            if(this.value <= this.siginList2.length -2){
              this.value = this.value + 1;
            }
            var index = this.value;
            this.number = this.siginList2[index].useName;
            this.week = this.siginList2[index].useWeek;
            this.classroom = this.siginList2[index].useClassRoom;
            this.dev_num = this.siginList2[index].useDevNum;
          }
        }
      },
      mounted(){
        this.getSignTotle();
      }
    }
</script>

<style scoped>
  #container{
    height: auto;
    float: left;
    width: 100%;
  }
  .item{
    float: left;
    width: 30%;
    text-align:center;
  }

</style>
